<template>
	<div class="pageFull-block" :style="{textAlign:align}">
		<el-pagination
			small
		  background
			:page-size="pageSize"
		  :layout="layout"
			:total="total"
			:current-page.sync = "currePage"
			@current-change="currentChange">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		props:{
			layout:{//分页可见组件，可选值sizes, prev, pager, next, jumper, ->, total, slot
				type:String,
				default:'prev, pager, next'
			},
			pageSize:{//每页数据条数
				type:Number,
				default:4
			},
			total:{//数据总条数
				type:Number,
				default:100
			},
			align:{
				type:String,
				default:'right'
			},
			currePage:{//定位当前选中页
				type:Number,
				default:1
			}
		},
		data(){
			return {

			}
		},
		methods:{
			currentChange(e){
				this.$emit('currentChange',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageFull-block{
		margin-top:.6vh;
		/deep/{
			.el-pagination.is-background.el-pagination--small .btn-next, .el-pagination.is-background.el-pagination--small .btn-prev, .el-pagination.is-background.el-pagination--small .el-pager li{
				background: rgba(34, 132, 220, .3);
				color:#0CFCFF;
				border:1px solid #0CFCFF
				// background: rgba(34, 132, 220, .3);
				// color:rgba(36, 145, 239, 1.0);
				// border:1px solid rgba(34, 132, 220, 1)
			}
			.el-pagination.is-background .el-pager li:not(.disabled).active{
				background: #0CFCFF;
				// background: rgba(34, 132, 220, 1);
				color:#fff
			}
			.el-pagination.is-background.el-pagination--small .btn-next, .el-pagination.is-background.el-pagination--small .btn-prev, .el-pagination.is-background.el-pagination--small .el-pager li {
				min-width: 1.15vw;
			}
			.el-pagination--small .btn-next, .el-pagination--small .btn-prev, .el-pagination--small .el-pager li, .el-pagination--small .el-pager li.btn-quicknext, .el-pagination--small .el-pager li.btn-quickprev, .el-pagination--small .el-pager li:last-child {
				font-size: 0.63vw;
				line-height: 2.24vh;
				height: 2.54vh;
			}
			.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
				font-size: 0.63vw;
				line-height: 2.54vh;
			}
		}
	}
</style>
